<template>
	<div class="el-home-contain">
		<el-row :gutter="10">
			<el-col :span="16">
				<el-card class="box-card" style="margin-bottom: 10px;" body-style="padding:0;">
					<div class="el-tiles">
						<div class="el-avatar"><img src="../../assets/img/avatar.png"><br /><span class="size-15">宋茜</span><br>共享业务服务部</div>
						<div class="el-tile">
							<dt class="el-tile-title">未读邮件<br><span class="size-40">26</span></dt>
							<dd class="el-tile-icon"><img src="../../assets/img/tile-icon1.png" style="width: 60px;"></dd>
						</div>
						<div class="el-tile" style="background-color: #FDEEE2;">
							<dt class="el-tile-title">待办文件<br><span class="size-40">336</span></dt>
							<dd class="el-tile-icon"><img src="../../assets/img/tile-icon2.png" style="width: 60px;"></dd>
						</div>
						<div class="el-tile" style="background-color: #DDEFFF;">
							<dt class="el-tile-title">待阅文件<br><span class="size-40">78</span></dt>
							<dd class="el-tile-icon"><img src="../../assets/img/tile-icon3.png" style="width: 60px;"></dd>
						</div>
					</div>
				</el-card>
				<el-card class="box-card el-card_tabs color-000" body-style="height:400px">
					<div slot="header" class="clearfix">
						<span><i class="el-title-adorn"></i> 统一审批中心</span>
						<el-button type="text" style="float: right;">更多</el-button>
					</div>
					<el-tabs>
						<el-tab-pane :label="'待办('+taskList.length+')'" style="height: 275px;overflow: hidden;">
							<ul class="el-news-list">
								<li class="el-news-li" @click="openTaskWindow(list)" v-for="(list, index) in taskList" :key="list.taskId">
									<dt class="el-news-title">
										<p class="size-15">{{list.taskTitle}}</p>
										提交人：{{list.submitUserName?list.submitUserName:"系统管理员"}} <span class="el-space"></span> 审批人：{{list.activityUserName?list.activityUserName:"王刚"}}
									</dt>
									<dd class="el-news-date">{{
                    list.startDate
                  }}</dd>
								</li>
							</ul>
						</el-tab-pane>
						<el-tab-pane :label="'已办('+achTaskList.length+')'" style="height: 275px;overflow: hidden;">
							<ul class="el-news-list">
								<li class="el-news-li" @click="openAchTaskWindow(list)" v-for="(list, index) in achTaskList" :key="list.taskId">
									<dt class="el-news-title">
										<p class="size-15">{{list.taskTitle}}</p>
										提交人：{{list.submitUserName?list.submitUserName:"系统管理员"}} <span class="el-space"></span> 审批人：{{list.activityUserName?list.activityUserName:"王刚"}}
									</dt>
									<dd class="el-news-date">{{
                  list.startDate
                }}</dd>
								</li>
							</ul>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card class="box-card" style="margin-bottom: 10px;" body-style="overflow:hidden;padding:0;">
					<div class="el-schedule">
						<h1 class="el-schedule-title"><span class="size-20">August</span>&nbsp;&nbsp;2019</h1>
						<ul class="el-schedule-cont">
							<li class="el-schedule-date">一<br>5</li>
							<li class="el-schedule-date">二<br>6</li>
							<li class="el-schedule-date">三<br>7</li>
							<li class="el-schedule-date">四<br>8</li>
							<li class="el-schedule-date">五<br>9</li>
							<li class="el-schedule-date">六<br>10</li>
							<li class="el-schedule-date">日<br>11</li>
						</ul>
					</div>
					<ul class="el-news-list">
						<li class="el-news-li el-notice-li" style="padding-left:5px ;">
							<i class="el-icon-circle-plus el-list-icon"></i>添加我的日程
						</li>
						<li class="el-news-li el-notice-li">
							<i class="el-list-dot"></i>微服务技术中台汇报演示
						</li>
						<li class="el-news-li el-notice-li">
							<i class="el-list-dot"></i>党建会议交流学习
						</li>
						<li class="el-news-li el-notice-li">
							<i class="el-list-dot"></i>“安全责任在我心”主题学习
						</li>
						<li class="el-news-li el-notice-li">
							<i class="el-list-dot"></i>下班打卡，填写工时
						</li>
					</ul>
				</el-card>
				<el-card class="box-card el-card-noborder color-000" body-style="overflow:hidden;padding:0;height:238px;">
					<div slot="header" class="clearfix">
						<span><i class="el-title-adorn"> </i> 常用功能</span>
					</div>
					<div class="el-shortcut">
						<ul class="el-shortcut-ul">
							<li class="el-shortcut-li">
								<router-link :to="homeRouterMacth('7dc2fb6325c446d89d627a0febd634d2')">
								  <img src="../../assets/img/shortcut9.png"><br>字典管理
								</router-link>
							</li>
							<li class="el-shortcut-li">
								<router-link :to="homeRouterMacth('1d5476a5216e45059415980b45a05d9b')">
							    <img src="../../assets/img/shortcut1.png"><br>报表中心
								</router-link>
							</li>
							<li class="el-shortcut-li">
								<router-link :to="homeRouterMacth('1b449b8e993a415d8c5dff4265a07490')">
								  <img src="../../assets/img/shortcut7.png"><br>附件管理
								</router-link>
							</li>
							<li class="el-shortcut-li">
								<router-link :to="homeRouterMacth('c36f13ed4a454647b6e90c6c0bd025c2')">
									<img src="../../assets/img/shortcut1.png"><br>日程管理
								</router-link>
								</li>
							<li class="el-shortcut-li">
								<router-link :to="homeRouterMacth('5aa00798c7234382b7d612efb7088db3')">
								  <img src="../../assets/img/shortcut2.png"><br>会议管理
								</router-link>
							</li>
							<li class="el-shortcut-li">
								<router-link :to="homeRouterMacth('a48380b6183b4727afb5d898843255ec')">
								  <img src="../../assets/img/shortcut3.png"><br>通讯录
								</router-link>
							</li>
							<li class="el-shortcut-li">
								<router-link :to="homeRouterMacth('83575930d1754980b7497827904f32b3')">
								  <img src="../../assets/img/shortcut4.png"><br>任务管理
								</router-link>
							</li>
							<li class="el-shortcut-li">
								<router-link :to="homeRouterMacth('8be6fe218d2c4cce9e1f16a0b6f0ffba')">
								  <img src="../../assets/img/shortcut5.png"><br>文库
								</router-link>
							</li>
							<li class="el-shortcut-li">
								<router-link :to="homeRouterMacth('234152d240c945b38b70def0bfa194dc')">
								  <img src="../../assets/img/shortcut6.png"><br>文章管理
								</router-link>
							</li>
							<li class="el-shortcut-li">
								<router-link :to="homeRouterMacth('1042d3ab83884c7195408be2cc1fcb49')">
								  <img src="../../assets/img/shortcut8.png"><br>请假单
								</router-link>
							</li>
						</ul>
					</div>
				</el-card>
			</el-col>
		</el-row>
<!--		<el-row :gutter="10" style="margin-top:10px;">-->
<!--			<el-col :span="16">-->
<!--				<el-card class="box-card el-card_tabs color-000">-->
<!--					<div slot="header" class="clearfix">-->
<!--						<span><i class="el-title-adorn"></i> 任务</span>-->
<!--					</div>-->
<!--					<el-tabs>-->
<!--						<el-tab-pane label="进行中(11)" style="height: 275px;overflow: hidden;">-->
<!--							<ul class="el-news-list">-->
<!--								<li class="el-news-li" @click="openTaskWindow">-->
<!--									<dt class="el-news-title">-->
<!--										<p class="size-15">星宇友空间方案沟通</p>-->
<!--										发起人：张驰 <span class="el-space"></span> 督办人：王鹏-->
<!--									</dt>-->
<!--									<dd class="el-news-date">2019-07-10</dd>-->
<!--								</li>-->

<!--								<li class="el-news-li" @click="openTaskWindow">-->
<!--									<dt class="el-news-title">-->
<!--										<p class="size-15">微服务技术中台演示环境数据维护</p>-->
<!--										发起人：张驰 <span class="el-space"></span> 督办人：王鹏-->
<!--									</dt>-->
<!--									<dd class="el-news-date">2019-07-10</dd>-->
<!--								</li>-->

<!--								<li class="el-news-li" @click="openTaskWindow">-->
<!--									<dt class="el-news-title">-->
<!--										<p class="size-15">业务综合管理系统原型确认</p>-->
<!--										发起人：张驰 <span class="el-space"></span> 督办人：王鹏-->
<!--									</dt>-->
<!--									<dd class="el-news-date">2019-07-10</dd>-->
<!--								</li>-->

<!--								<li class="el-news-li" @click="openTaskWindow">-->
<!--									<dt class="el-news-title">-->
<!--										<p class="size-15">“三重一大”数据上报</p>-->
<!--										发起人：张驰 <span class="el-space"></span> 督办人：王鹏-->
<!--									</dt>-->
<!--									<dd class="el-news-date">2019-07-10</dd>-->
<!--								</li>-->
<!--								<li class="el-news-li" @click="openTaskWindow">-->
<!--									<dt class="el-news-title">-->
<!--										<p class="size-15">信息化考核需求分析与评估</p>-->
<!--										发起人：张驰 <span class="el-space"></span> 督办人：王鹏-->
<!--									</dt>-->
<!--									<dd class="el-news-date">2019-07-10</dd>-->
<!--								</li>-->
<!--							</ul>-->
<!--						</el-tab-pane>-->
<!--						<el-tab-pane label="已延期" style="height: 300px;overflow: hidden;">-->
<!--							<p style="text-align: center;">暂无数据...</p>-->
<!--						</el-tab-pane>-->
<!--						<el-tab-pane label="未开始" style="height: 300px;overflow: hidden;">-->
<!--							<p style="text-align: center;">暂无数据...</p>-->
<!--						</el-tab-pane>-->
<!--					</el-tabs>-->
<!--				</el-card>-->
<!--			</el-col>-->
<!--			<el-col :span="8">-->
<!--				<el-card class="box-card el-card_tabs color-000">-->
<!--					<div slot="header" class="clearfix">-->
<!--						<span><i class="el-title-adorn"> </i> 会议</span>-->
<!--					</div>-->
<!--					<el-tabs>-->
<!--						<el-tab-pane label="我参与的" style="height: 274px;overflow: hidden;">-->
<!--							<ul class="el-news-list">-->
<!--								<li class="el-news-li el-notice-li">-->
<!--									<i class="el-list-dot"></i>陈霞霞的报销申请-->
<!--								</li>-->
<!--							</ul>-->
<!--						</el-tab-pane>-->
<!--						<el-tab-pane label="我发起的" style="height: 274px;overflow: hidden;"></el-tab-pane>-->
<!--					</el-tabs>-->
<!--				</el-card>-->
<!--			</el-col>-->
<!--		</el-row>-->
<!--		<el-row :gutter="10" style="margin-top:10px;">-->
<!--			<el-col :span="16">-->
<!--				<el-card class="box-card el-card_noborder color-000" body-style="height:300px;overflow:hidden;padding:10px 0;">-->
<!--					<div slot="header" class="clearfix">-->
<!--						<span><i class="el-title-adorn"></i> 集团新闻</span>-->
<!--					</div>-->
<!--					<ul class="el-news-list" style="padding:0 10px">-->
<!--						<li class="el-news-li el-news-li-noborder" v-for="o in 5" :key="o" @click="newsPreview()">-->
<!--							<dt class="el-news-title">-->
<!--								【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力-->
<!--							</dt>-->
<!--							<dd class="el-news-date">2019-07-10</dd>-->
<!--						</li>-->
<!--					</ul>-->
<!--				</el-card>-->
<!--			</el-col>-->
<!--			<el-col :span="8">-->
<!--				<el-card class="box-card el-card_tabs color-000">-->
<!--					<div slot="header" class="clearfix">-->
<!--						<span><i class="el-title-adorn"></i> 文库</span>-->
<!--					</div>-->
<!--					<el-tabs>-->
<!--						<el-tab-pane label="企业文档" style="height: 270px;overflow: hidden;">-->
<!--							<ul class="el-news-list">-->
<!--								<li class="el-news-li el-notice-li">-->
<!--									<i class="el-list-dot"></i>陈霞霞的报销申请-->
<!--								</li>-->
<!--							</ul>-->
<!--						</el-tab-pane>-->
<!--						<el-tab-pane label="内部文档" style="height: 270px;overflow: hidden;"></el-tab-pane>-->
<!--						<el-tab-pane label="项目文档" style="height: 270px;overflow: hidden;"></el-tab-pane>-->
<!--					</el-tabs>-->
<!--				</el-card>-->
<!--			</el-col>-->
<!--		</el-row>-->


	</div>
</template>

<script>
	import {
		Tabs,
		TabPane
	} from 'element-ui';
	import { getTaskList, getAchTaskList, getConferencet } from '@/api/homepage/homepage.js'
	export default {
		components: {
			'el-tabs': Tabs,
			'el-tab-pane': TabPane
		},
		name: '',
		data() {
			return {
				taskList: [], //待办列表
				achTaskList: [], //已办列表
				Authorization: '',
				sysCode: '',
				getConferencetList: [] // 会议我参与的
			};
		},
		methods: {
			/* 日程跳转 */
			homeRouterMacth (appId) {
        return '/layout/appIframe?appId=' + appId
			},
			/* 获取待办*/
			getTaskList() {
				getTaskList(1, 10000).then(res => {
					if (res.data.code != 10000) return;
					this.taskList = res.data.data.records;

				})
			},
			/* 获取已办*/
			getAchTaskList() {
				getAchTaskList(1, 10000).then(res => {
					if (res.data.code != 10000) return;
					this.achTaskList = res.data.data.records;
				})
			},
			/* 打开待办*/
			openTaskWindow(list) {
				let taskUrl = list.taskUrl
				if (taskUrl.substr(0,7).toLowerCase() == "http://" || taskUrl.substr(0,8).toLowerCase() == "https://") {
          this.$router.push(this.routerMatch({
						name: 'homeIframe',
						query: list
					}))
				} else {
					this.$router.push(this.routerMatch({
						name: 'leaveApproveDone',
						params: list
					}))
				}
			},
			/* 打开已办 */
			openAchTaskWindow(list) {
				let taskUrl = list.taskUrl
				if (taskUrl.substr(0,7).toLowerCase() == "http://" || taskUrl.substr(0,8).toLowerCase() == "https://") {
          this.$router.push(this.routerMatch({
						name: 'homeIframe',
						query: list
					}))
				} else {
					this.$router.push(this.routerMatch({
						name: 'leaveApproveDone',
						params: list
					}))
				}
			},
			getCookie (cname) {
        var name = cname + "="
        var ca = document.cookie.split(';')
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i].trim()
          if (c.indexOf(name) == 0) return c.substring(name.length, c.length)
        }
        return ""
			},
			/* 新闻预览 */
      newsPreview () {
				this.$router.push(this.routerMatch({
					path: '/previewComponent',
					// query: {
					// 	id: id
					// }
				}))
			},
			getConferencetEvent () {
				getConferencet(1, 1, 10000).then(res => {
					console.log(res.data.data)
				})
			}
		},
		created() {
			this.getTaskList(); //获取待办
			this.getAchTaskList(); //获取已办
			this.getConferencetEvent(1, 1, 10000) // 会议
			this.sysCode = this.getCookie('sysCode')
      this.Authorization = this.getCookie('Authorization')
		}
	};
</script>

<style lang="scss">
	.el-home-contain {
		width: 90%;
		min-width: 1152px;
		max-width: 1600px;
		margin: 0 auto;
	}


	.el-card_tabs {
		.el-card__header {
			border: none;
			padding-bottom: 0;
		}

		.el-card__body {
			padding: 0;
		}

		.el-tabs {
			padding: 0 0 10px 10px;

			.el-tabs__nav-wrap {
				width: 100%;
			}

			.el-tabs__nav-wrap:after {
				height: 0;
				border-bottom: 1px solid #E4E7ED;
			}

			.el-tabs__header {
				margin-bottom: 5px;
			}

			.el-tabs__item {
				height: auto;
				line-height: normal;
				padding-bottom: 10px;
			}
		}
	}

	.el-card_noborder {
		.el-card__header {
			border: none;
			padding-bottom: 0;
		}
	}

	.el-title-adorn {
		border-left: 3px solid #409EFF;
		display: inline-block;
		margin-right: 2px;
		height: 16px;
		vertical-align: middle;
		margin-top: -2px;
	}

	.el-news-list {
		float: left;
		width: calc(100% + 25px);
		height: 100%;
		overflow: auto;
		cursor: pointer;

		& .el-news-li:first-child {
			padding-top: 0;
		}
	}

	.el-news-li {
		float: left;
		width: calc(100% - 25px);
		font-size: 12px;
		line-height: 25px;
		position: relative;
		padding: 5px;
		border-bottom: 1px solid #F4F6FC;
		box-sizing: border-box;
		display: table;

		.el-news-title {
			display: table-cell;
			vertical-align: middle;
		}

		&:hover {
			color: #409EFF;
			text-decoration: underline;

			.el-news-date {
				color: #409EFF;
			}
		}

		.el-news-date {
			display: table-cell;
			text-align: right;
			vertical-align: middle;
			width: 100px;
		}
	}


	.el-news-date {
		font-size: 12px;
		color: #333;
	}

	.el-news-date {}

	.el-list-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		border: 1px solid #1890FF;
		box-sizing: border-box;
		margin-right: 10px;
	}

	.el-list-dot.active {
		background: #1890FF;
	}

	.size-12 {
		font-size: 12px;
	}

	.size-15 {
		font-size: 15px;
	}

	.size-18 {
		font-size: 18px;
	}

	.size-20 {
		font-size: 20px;
	}

	.size-40 {
		font-size: 40px;
	}

	.color-000 {
		color: #000;
	}

	.color-333 {
		color: #333;
	}

	.el-notice-li {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 12px;
		color: #333;

		&:hover {
			background-color: #F4F6FC;
		}
	}

	.el-news-li-noborder {
		border-bottom: none;
	}

	.el-list-icon {
		color: #1890FF;
		margin-right: 5px;
		font-size: 16px;
		vertical-align: middle;

	}

	.el-space {
		display: inline-block;
		width: 30px;
	}

	.el-tiles {
		float: left;
		width: 100%;
		display: table;
		border-spacing: 10px;
	}

	.el-avatar {
		display: table-cell;
		text-align: center;
		vertical-align: top;
		white-space: nowrap;
		font-size: 13px;
		padding: 0 10px;

		img {
			width: 70px;
			height: 70px;
		}
	}

	.el-tile {
		position: relative;
		display: table-cell;
		width: 200px;
		height: 100px;
		padding: 0 10px;
		vertical-align: middle;
		border-radius: 2px;
		background: rgb(230, 246, 250);

		.el-tile-title {
			display: table-cell;
			vertical-align: middle;
			width: 100%;
		}

		.el-tile-icon {
			display: table-cell;
			vertical-align: middle;
		}
	}

	.el-schedule {
		float: left;
		width: 100%;
		min-height: 100px;
		padding-bottom: 10px;
		background: linear-gradient(to bottom right, #209CFF, #78C4FF);
		color: #fff;
	}

	.el-schedule-title {
		float: left;
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}

	.el-schedule-cont {
		float: left;
		width: 100%;
		display: table;
	}

	.el-schedule-date {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}

	.el-shortcut {
		float: left;
		width: calc(100% + 25px);
		padding: 10px 0;
		overflow: auto;
		height: 122px;
	}

	.el-shortcut-ul {
		float: left;
		width: calc(100% - 25px);
	}

	.el-shortcut-li {
		float: left;
		width: 20%;
		text-align: center;
		font-size: 12px;
		color: #333;
		white-space: nowrap;
		margin-bottom: 10px;
		cursor: pointer;

		&:hover {
			color: #409EFF;
			text-decoration: underline;
		}

		img {
			width: 40px;
			height: 40px;
			margin-bottom: 5px;
		}
	}
</style>
